<template>
	<view class="container">
		<view class="tui-page__hd">
			<view class="tui-page__title">overflow-hidden</view>
			<view class="tui-page__desc">内容超出隐藏：渐变隐藏需要设置内容区域高度。</view>
		</view>
		<view class="tui-title">默认显示</view>
		<view class="tui-content">
			<tui-overflow-hidden>
				人的一生要想活得幸福，走得更为长远，有一项能力必不可少，那就是感恩能力。卡耐基曾说过，感恩是极有教养的产物，你不可能从一般人身上得到，因为忘记或不会感谢乃是人的天性。
			</tui-overflow-hidden>
		</view>
		<view class="tui-title">显示一行</view>
		<view class="tui-content">
			<tui-overflow-hidden :lineClamp="1">
				人的一生要想活得幸福，走得更为长远，有一项能力必不可少，那就是感恩能力。卡耐基曾说过，感恩是极有教养的产物，你不可能从一般人身上得到，因为忘记或不会感谢乃是人的天性。
			</tui-overflow-hidden>
		</view>
		<view class="tui-title">显示三行</view>
		<view class="tui-content">
			<tui-overflow-hidden :lineClamp="3">
				人的一生要想活得幸福，走得更为长远，有一项能力必不可少，那就是感恩能力。卡耐基曾说过，感恩是极有教养的产物，你不可能从一般人身上得到，因为忘记或不会感谢乃是人的天性。
			</tui-overflow-hidden>
		</view>
		<view class="tui-title">显示四行</view>
		<view class="tui-content">
			<tui-overflow-hidden :lineClamp="4">
				人的一生要想活得幸福，走得更为长远，有一项能力必不可少，那就是感恩能力。卡耐基曾说过，感恩是极有教养的产物，你不可能从一般人身上得到，因为忘记或不会感谢乃是人的天性。
			</tui-overflow-hidden>
		</view>
		<view class="tui-title">渐变隐藏</view>
		<tui-overflow-hidden :type="2" height="300rpx" padding="30rpx 30rpx 0 30rpx" gradientColor="#f8f8f8"
			:removeGradient="removeGradient">
			<rich-text :nodes="richText"></rich-text>
		</tui-overflow-hidden>
		<view class="tui-btn__box" v-if="!removeGradient">
			<tui-button :size="34" bold width="372rpx" height="84rpx" margin="40rpx auto" @click="readmore">阅读全文
			</tui-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				richText: '<div style="color:#5677fc;font-weight:600">人的一生要想活得幸福，走得更为长远，有一项能力必不可少，那就是感恩能力。卡耐基曾说过，感恩是极有教养的产物，你不可能从一般人身上得到，因为忘记或不会感谢乃是人的天性。</div> <div style="color:#5677fc;font-weight:600;padding-top:10px;">所以那些擅长感恩的人，往往会更受人欢迎，也会得到很多人的支持。耶鲁大学曾说过，感恩能力是一种核心竞争力，具备这种能力的人往往会更有发展前途。</div><div style="color:#5677fc;font-weight:600;padding-top:10px;">感恩能力之所以重要，这是因为感恩其实贯穿我们生命成长每个阶段，感恩也让我们更容易和他人和谐相处，帮助我们拥有更有意义的人生。</div>',
				removeGradient: false
			}
		},
		methods: {
			readmore() {
				this.removeGradient = true
			}
		}
	}
</script>

<style>
	.container {
		padding-bottom: 120rpx;
	}

	.tui-title {
		width: 100%;
		padding: 70rpx 30rpx 30rpx;
		box-sizing: border-box;
		font-weight: bold;
	}

	.tui-content {
		width: 100%;
		padding: 30rpx;
		background-color: #fff;
		box-sizing: border-box;
	}

	.tui-btn__box {
		width: 100%;
		display: flex;
		justify-content: center;
	}
</style>
